html5的video在IOS端默认全屏和黑屏问题

2024-07-16 05:13| 来源: 网络整理| 查看: 265

最近项目中需要使用video来代替有点复杂的动画（video循环自动播放），遇到了使用过程中的两个坑

ios端默认全屏解决办法

查阅资料说在在video标签加如下属性

无奈测试机是ios10，上面这段代码在iOS8，9下生效因项目是react工匠，不支持除data-*之外的自定义属性，需在compentDidMount加如下代码

this.videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');// Fix fullscreen problem on IOS 8 and 9 this.videoElement.setAttribute('playsinline', 'playsinline'); // Fix fullscreen problem on IOS 10

如果项目基于cordova构建，还需在config.xml加如下属性

对了，行内播放之后还解决了一个问题，可以在video视窗使用定位来增加遮罩等功能

video自动播放黑屏

最开始产品需求是视频加载自动播放并且循环，导致快速切换页面再加载视频经常黑屏很长一段时间才能播放

寻求解决思路：一. 视频加载前使用loading，对video执行onCanPlay监听remove loading

//react 代码 canPlay() { this.mask.remove(); } {this.mask = node;}}> {this.videoElement = node;}} onCanPlay={this.canPlay}> Your browser does not support the video tag.

问题：依然存在黑屏，换成onplay尝试无解

网上说是videoview在加载第二个视频时默认会释放到第一个视频的资源再加载第二个视频的资源这个比较耗内存会出现短暂的黑屏，可通过Web Workers开启多线程操作资源的加载，未尝试，可作为思路

二. 更改需求^ ^ 因自动循环播放体验不友好，后期改为手动播放，添加poster，preload='auto'遂可以解决

playVideo() { this.videoElement.play(); this.img.style.display = 'none'; } videoEnded() { this.img.style.display = 'block'; } this.img=node;}} {...tapOrClick(this.playVideo)}/> (node) =>{this.videoElement = node;}} onEnded={this.videoEnded}> // Automatic playback started! }).catch(function(error) { // Automatic playback failed. // Show a UI element to let the user manually start playback. }); }

重点：相对于web端，还可以使用库video.js，相对于html5的video，video.js功能更全，兼容性更好，也支持循环播放功能。

【本文地址】

公司简介

联系我们